<template>
  <div class="components-container">
    <aside>drag-list base on
      <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
    </aside>
    <div class="editor-container">
      <dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DndListDemo'
}
</script>

<script setup>
import { ref } from 'vue'
import DndList from '@/components/DndList'

import { fetchList } from '@/api/article'

const list1 = ref([])
const list2 = ref([])
const listLoading = ref(true)

const getData = () => {
  listLoading.value = true
  fetchList().then(response => {
    list1.value = response.data.items.splice(0, 5)
    list2.value = response.data.items
  })
}

getData()
</script>

<style scoped>

</style>
